<template>
    <div style="padding:10px;background-color: white;">
        <Search @submit="handleSearch" @reset="handleReset">
           <a-form-item label="用户手机号">
                <a-input v-model:value="state.formData.customerPhone"></a-input>
           </a-form-item>
           <a-form-item label="预约员工">
                <a-select v-model:value="state.formData.userId">
                  <a-select-option :value="1">小琴</a-select-option>
                </a-select>
           </a-form-item>
           <a-form-item label="预约门店">
                <a-select v-model:value="state.formData.storeCode">
                  <a-select-option :value="1">万科店</a-select-option>
                </a-select>
           </a-form-item>
        </Search>
    </div>
    <div style="padding:10px;margin-top:10px;background-color: white;">
        <div>
            <AButton type="primary" :currentReservation="state.currentReservation" @click="addReservation">新增</AButton>
        </div>
        <ATable :data-source="state.dataSource" :columns="columns" bordered :pagination="false"></ATable>
        <Pagination :pagination="state.pagination" @change="pageChange"></Pagination>
    </div>
    <ReservationModal 
    :current-reservation="state.currentReservation" 
    v-if="state.reservationModalVisibel"
    @cancel="cancelReservationModal"
    @ok="reservationModalOk"></ReservationModal>
</template>
<script lang="ts" setup>
import {reactive,h} from "vue";
import Search from '@/components/Search/Search.vue';
import Pagination from "@/components/Pagination/index.vue";
import { ReservationTypes,CommontTypes, PageResult, ResponseVo} from "@/type"
import { ReservationService } from "@/service";
import ReservationModal from "./components/ReservationModal.vue"
import {Button} from "ant-design-vue";

const columns = [
    {title:"门店编号",dataIndex:"reservationCode"},
    {title:"会员ID",dataIndex:"customerId"},
    {title:"员工",dataIndex:"userId"},
    {title:"预约时间",dataIndex:"reserveDate"},
    {title:"状态",dataIndex:"status"},
    {title:"备注",dataIndex:"remark"},
    {title:"创建人",customRender:({record}:{record:ReservationTypes.IReservationItem})=>{
        return h('div',{},`${record.creator}/${record.createTime}`)
    }},
    {title:"修改人",customRender:({record}:{record:ReservationTypes.IReservationItem})=>{
        return h('div',{},`${record.updator}/${record.updateTime}`)
    }},
    {title:"操作",customRender:({record}:{record:ReservationTypes.IReservationItem})=>{
        return h('div',{},[
            h(Button,{type:"text",onClick:()=>editReservation(record)},"编辑")
        ])
    }}
]

const state = reactive<{
    formData: ReservationTypes.PageReservationType,
    pagination:CommontTypes.IPagination,
    dataSource:ReservationTypes.IReservationItem[],
    reservationModalVisibel: boolean,
    currentReservation:Partial<ReservationTypes.IReservationItem>
}>({
    formData:{},
    pagination:{
        pageNum:1,
        pageSize:10,
        total:0
    },
    dataSource:[],
    reservationModalVisibel:false,
    currentReservation:{}
})

const handleSearch = async()=>{
    const res:ResponseVo<PageResult<ReservationTypes.IReservationItem>>= await ReservationService.pageReservation({...state.formData,...state.pagination});
    if(res.code===0){
        state.dataSource = res.data.list;
        state.pagination.total = res.data.total;
    }
}

const pageChange = (page:number,size:number)=>{
    state.pagination.pageNum = page;
    state.pagination.pageSize = size;
    handleSearch();
}

const handleReset = ()=>{
    state.formData = {};
    state.pagination.pageNum=1;
    state.pagination.total=0;
    handleSearch();
}

const addReservation = ()=>{
    state.reservationModalVisibel = true;
    state.currentReservation = {};
}

const editReservation = async(record:ReservationTypes.IReservationItem)=>{
    state.currentReservation ={};
    let res:ResponseVo<ReservationTypes.IReservationItem> =await ReservationService.detailReservation(record.id);
        console.log(res)
    if(res.code===0){
        state.currentReservation = {...res.data};
        console.log("state.currentReservation--->",state.currentReservation);
        state.reservationModalVisibel = true;
    }
}

const cancelReservationModal = ()=>{
    state.reservationModalVisibel = false;
}

const reservationModalOk = ()=>{
    state.reservationModalVisibel = false;
    state.pagination.pageNum=1;
    handleSearch();
}

</script>
<style lang="ts" setup>

</style>